<template>
<!--  顶部-->
<div id="titleMain"  style="display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center;">
  <el-button type="primary" @click="openClose" style="background-color: #f2f2f2;border-color: #f2f2f2;height: 60px;margin-right: 22px;"><i class="icon-bxl-spring-boot" style="color:black" >&nbsp;&nbsp;速朋电子商务</i></el-button>

  <div class="kouhao">

      <i class="icon-yangshengqi" ></i>
        <span>&nbsp;&nbsp;</span>
    <div>
      <marquee behavior="" direction=""> 欢迎使用速朋钢材进销存管理系统，请大家认真做好自己的本职工作！</marquee>

    </div>

  </div>

  <div style="flex: 1"></div>

  <div style="width: 100px; flex: 1; margin: 0 20px">
    <span style="white-space: nowrap">{{ clockTime }}</span>
  </div>

  <div  style="margin-top: 7px;display: flex">
    <div style="margin-top: 3px">
      <el-button type="primary" icon="el-icon-s-home" @click="backMain" >首页</el-button>
    </div>

    <div class="block" style="margin-left: 10px"><el-avatar :size="45" :src="circleUrl"></el-avatar></div>
    <div  style="margin-top: 15px;margin-left: 5px">
      <el-dropdown>
      <span class="el-dropdown-link">
          {{userName}}  <i   class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu id="idCardIcon2" slot="dropdown" :split-button="true">
<!--        <router-link :to="{name:'UserMsgDetail'}"></router-link>-->
        <div @click="fatherThing">
          <el-dropdown-item icon="el-icon-user" >个人信息</el-dropdown-item>
        </div>

        <router-link :to="{name:'ChangePassword'}"><el-dropdown-item icon="el-icon-unlock">修改密码</el-dropdown-item></router-link>
       <div @click="loginOut"> <el-dropdown-item  icon="el-icon-delete">退出登录</el-dropdown-item></div>

      </el-dropdown-menu>
    </el-dropdown>



    </div>

  </div>


</div>
</template>

<script>
import bus from "../utils/Bus";
export default {
  name: "TitleMain",
  props:['userName'],
  data(){
    return{
      drawer: false,
      direction: 'rtl',
      clockTime: '',
      openC:false,
      circleUrl: "https://images.unsplash.com/photo-1557718513-20c9727656bc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
    }
  },
  mounted() {
    setInterval(() => {
      let now = new Date();
      let hours = now.getHours();
      let minute = now.getMinutes();
      let seconds = now.getSeconds();
      this.clockTime = (hours < 10 ? '0' +hours : hours) + ' : ' + (minute < 10 ? '0' + minute :minute) + ' : ' + (seconds < 10 ? '0' + seconds : seconds);
    }, 100);
  },
  methods: {
    fatherThing(){
      this.$emit('openRightSide')
    },
    backMain(){
      this.$router.push("/main")
    },
    loginOut(){
      this.$message({
        message: '已安全退出',
        type: 'success'
      });
      localStorage.removeItem("token");
      this.$router.push("/")
    },
    openClose(){
      if (this.openC){
        this.openC=false
        bus.$emit('chuanzhi',this.openC)
      }else {
        this.openC=true
        bus.$emit('chuanzhi',this.openC)
      }
    },
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
}
.el-dropdown-link:hover{
  color: #409EFF;
}
.el-dropdown-link {
  cursor: pointer;


}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.kouhao{
  margin-top: 10px;
  display: flex;
  /*height: 30px;*/
  line-height: 35px;
  margin-left: 30px;
  position: relative;
}
#titleMain{
  background-color: #f2f2f2;
  width: 100%;
  /*background-color: red;*/
  height: 60px;
  display: flex;
  border-bottom: 1px solid #b7b6b6;
}
</style>
